<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.26/vue.global.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model="message">
        <p>message: {{ message }}</p>
        <p>response: {{ response }}</p>
        <button @click="search()">搜索</button>
    </div>
    <script>
        const search = Vue.createApp({
            data() {
                return {
                    message: 'Hello Vue!',
                    response: undefined
                }
            },
            methods: {
                search() {
                    console.log('发送的消息:', String(this.message));
                    fetch("http://localhost:8080/search", {
                        cache: "no-store",
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json"
                        },
                        body: JSON.stringify({
                            message: String(this.message)
                        })
                    })
                    .then(response => {
                        console.log('响应状态:', response.status);
                        if (!response.ok) {
                            throw new Error(`HTTP error! status: ${response.status}`);
                        }
                        return response.json();
                    })
                    .then(data => {
                        console.log('响应数据:', data);
                        this.response = data.message;
                    })
                    .catch(error => {
                        console.error('请求出错:', error);
                        this.response = '请求出错，请稍后再试';
                    });
                }
            }
        })
        search.mount('#app')
    </script>
</body>
</html>